<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
    <li *ngFor="let hero of store.heroes"
        [class.selected]="hero === selectedHero"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span>
        {{hero.name}}
        <span *ngIf="hero.editable" class="x" (click)="deleteHero(hero)">X</span>
    </li>
</ul>
<div>
    <button (click)="newHero()">+</button>
    <button (click)="clearHeroes()">Clear</button>
    <button (click)="resetHeroes()">Reset</button>
</div>

<!--<my-hero-detail [hero]="selectedHero"></my-hero-detail>-->
<div *ngIf="selectedHero">
    <h2>{{selectedHero.name | uppercase}} is my hero</h2>
    <button (click)="gotoDetail()">View Details</button>
</div>